import { useEffect, useMemo, useState } from 'react';
import styles from './Tasks.module.css';
import { Button, Progress, Space } from 'antd'
import store from '@/store'
var electron = require('electron')
var { ipcRenderer } = electron
let timer: any = null;
let status = 'work'
export default function Home() {
  const [userState, userDispatchers] = store.useModel('user');
  const { taskData } = userState
  const [isGoing, isGoingSet] = useState(false)
  const [isPause, isPauseSet] = useState(false)
  let [curIndex, curIndexSet] = useState(1)
  const [isAuto, isAutoSet] = useState(true)

  // const status = useMemo(() => {

  // }, [curIndex])
  useEffect(() => {
    status = getStatus(curIndex)
  }, [curIndex])
  function getStatus(curIndex: number): string {
    if (curIndex % 8 === 0) {
      return 'longRest'
    } else if (curIndex % 2 === 1) {
      return 'work'
    } else {
      return 'rest'
    }
  }
  const [time, timeSet] = useState(taskData[status].time)
  // 秒转化成显示的时间
  function transformTime(time: number): string {
    var minites = ~~(time / 60)
    var seconds = time % 60
    return `${minites < 10 ? '0' + minites : minites} : ${seconds < 10 ? '0' + seconds : seconds}`
  }
  // 时间显示
  const timeText = useMemo(() => {
    if (isGoing) {
      return transformTime(time)
    } else {
      return transformTime(taskData[status].time)
    }
  }, [time, isGoing, status])
  // 进度条percent
  const percent = useMemo(() => {
    return (1 - time / taskData[status].time) * 100
  }, [time])
  // 开始倒计时
  function begin(total: number) {
    timer = setInterval(() => {
      timeSet(--total)
      if (total === -1) {
        ipcRenderer.send(status + 'Out')
        alert(status + 'Out')
        !isAuto && isGoingSet(false)
        clearInterval(timer)
        curIndex++
        curIndexSet(curIndex);
        timeSet(taskData[getStatus(curIndex)].time)
        isAuto &&
          begin(taskData[getStatus(curIndex)].time)
        // setTimeout(() => {
        // btnClick('start')
        // }, 1000)
      }
    }, 1000)
  }
  function btnClick(from) {
    switch (from) {
      case 'start':
        begin(taskData[status].time)
        isGoingSet(true)
        break;
      case 'pause':
        clearInterval(timer)
        isPauseSet(true)
        break;
      case 'continue':
        begin(time)
        isPauseSet(false)
        break;
      case 'skip':
        curIndex++
        isGoingSet(false)
        isPauseSet(false)
        clearInterval(timer)
        timeSet(taskData[getStatus(curIndex)].time)
        break;
      default:
        break;
    }
  }
  useEffect(() => {
    return () => clearInterval(timer)
  }, [])
  return (
    <div className={styles.container}>
      <div className={styles.title}>{taskData[status].title}</div>
      <div className={styles.time_box}>
        <div className={styles.time}>
          <Progress type="circle" width={300} strokeWidth={3} percent={percent} status="normal" format={() => timeText} />
        </div>

      </div>
      <div className={styles.button_box}>
        <Space>
          {isGoing && isPause === false && <Button type="primary" onClick={() => btnClick('pause')}>暂停</Button>}
          {!isGoing && <Button type="primary" onClick={() => btnClick('start')}>开始</Button>}
          {isGoing && isPause && <>
            <Button onClick={() => btnClick('continue')}>继续</Button>
            <Button onClick={() => btnClick('skip')}>跳过</Button></>}
        </Space>
      </div>
    </div>
  );

}
